<template>
	<view class="work-container">
		<!-- 标题栏 -->
		<header class="head">
			<!-- 	<div class="head-search">
				<uni-search-bar class="uni-mt-10" radius="100" placeholder="车架号/订单号" clearButton="none"
					cancelButton="none" @confirm="search">
				</uni-search-bar>
			</div> -->
			<div class="head-nav">
				<div @click="toggleSearch(item.value)" :class="['nav-item', compleStatus == item.value ? 'active' : '']"
					v-for="(item, index) in titleList" :key="index">
					<div class="nav-title">
						{{ item.title }}
					</div>
					<div class="task-tabs--line-wrap">
						<div class="task-tabs--line" :style="{
					            width: 100 / titleList.length + '%',
					            transform: `translateX(${tabsIndex * 100}%);`
					          }">
							<!-- <div class="inside_line"></div> -->
						</div>
					</div>
				</div>
			</div>
		</header>
		<div class="main" ref="main">
			<!-- 列表 -->
			<div class="list-concainer">
				<swiper class="custom-swiper" disable-touch>
					<swiper-item class="custom-swiper-item" v-for="(item, index) in titleList" :key="index">
						<scroll-view scroll-y class="custom-swiper-scroll" @scroll="carScroll"
							@scrolltolower="scrolltolower">
							<view class="custom-swiper-list" v-for="(item, index) in carArr" :key="index"
								v-if="carList.length>0">
								<ul class="list" ref="ul" @click="goToDetail(item)">
									<li>
										<p style="display:flex; align-items: center;justify-content: space-between;">
											<span>{{productName}}</span>
											<!-- <span>出险事故记录</span> -->
											<!-- 空：全部，1查询中，2成功，3失败 -->
											<!-- <span>{{ getStatusText(item.status) }}</span> -->
											<span>{{ getStatusText(item.status,item.msg) }}</span>
										</p>
									</li>
									<li>
										<div style="display:flex; align-items: center;">
											<div style="width:200upx;height:200upx;">
												<image style="width:100%; height:100%; object-fit: contain; "
													:src="carUrl" mode="aspectFit" alt="">
												</image>
											</div>
											<div style="flex:1;">
												<p>车架号:{{item.vin}}</p>
												<p>订单号: {{item.userOrderId}}</p>
												<!-- <p>ID {{item.id}}</p> -->
											</div>
										</div>
									</li>
									<li>
										<p style="display:flex; align-items: center;justify-content: space-between;">
											<span>￥{{item.price}}</span>
											<span>日期：{{item.createTime}}</span>
										</p>
									</li>
								</ul>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</div>
		</div>
		<uni-fab class="custom-circle" ref="fab" horizontal="right" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		getList,
		getDetail
	} from "@/api/infoList/index"
	export default {
		name: 'advanced-page',
		components: {},
		data() {
			return {
				titleList: [
					// 标题列表
					{
						title: '全部',
						value: '',
					},
					{
						title: '成功',
						value: '2',
					},
					{
						title: '失败',
						value: '3',
					},
					{
						title: '查询中',
						value: '1',
					},
				],
				tabsIndex: '', // 轮播图当前所在滑块的 index
				compleStatus: 0, // 表示所选的nav
				scrollTop: 0, // 滚动过程中离顶端的距离
				taskList: [], // 活动列表
				carList: [],
				productCode: '',
				productName: '',
				carUrl: require(`@/static/images/car.jpg`),
				startIndex: 0,
				skip: 0,
				limit: 1,
				searchName: ''
			}
		},
		computed: {
			carArr() {
				let pagesize = this.limit;
				if (this.skip) pagesize = this.skip * this.limit;
				// this.carList.slice(this.skip, pagesize)
				return this.carList.slice(0, pagesize);
			}
		},
		created() {
			this.init()
		},
		mounted() {
			this.limit = this.getPageNum();
			window.addEventListener("resize", () => {
				this.limit = this.getPageNum();
			})
		},

		onLoad(option) {
			this.productCode = option.productCode;
			this.productName = option.productName;
		},
		// 监听原生搜索框的点击事件
		onNavigationBarSearchInputClicked() {
			console.log("监听到了原生标题栏的点击事件");
		},
		// 监听原生标题栏按钮的点击事件
		onNavigationBarButtonTap() {
			console.log("监听到了原生标题栏按钮的点击事件");
			uni.showLoading({
				title: '加载中'
			});
			let obj = {
				vin: this.searchName,
				status: this.tabsIndex,
			}
			getList(obj).then(response => {
				this.carList = response
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			})
		},
		onNavigationBarSearchInputChanged(val) {
			if (val) {
				this.searchName = val.text || ''
			}
		},
		methods: {
			init() {
				uni.showLoading({
					title: '加载中'
				});
				let obj = {
					vin: '',
					status: this.tabsIndex,
					productCode: this.productCode,
					productName: this.productName
				}
				getList(obj).then(response => {
					this.carList = response
					uni.hideLoading();
				})
			},
			getPageNum() {
				let limit = 10;
				if (this.$refs.ul) {
					limit = ~~(this.$refs.main.clientHeight / this.$refs.ul[0].offsetHeight + 2);
				}
				return limit;
			},
			// 截取时间
			changeTime(val) {
				return val = val ? val.replace('T', ' ').split('.')[0] : val
			},
			// 点击切换标题的回调
			toggleSearch(val) {
				this.tabsIndex = val
				this.compleStatus = val
				this.init()
			},
			// 左右滑动切换标题的回调
			changeSwiper(e) {
				let val = e.target.current
				this.taskList = []
				// this.toggleSearch(val)
			},
			fabClick() {
				uni.navigateTo({
					url: `/pages/infoList/upload?productCode=${this.productCode}&productName=${this.productName}`
				})
			},
			goToDetail(item) {
				getDetail({
					vin: item.vin,
					productCode: this.productCode,
					productName: this.productName
				}).then(res => {
					if (res.code === 200) {
						uni.navigateTo({
							url: `/pages/infoList/detail?vin=${item.vin}&productCode=${this.productCode}&productName=${this.productName}`
						})
					}
				})


			},
			getStatusText(status, msg) {
				let statusType = {
					1: "查询中",
					2: "成功",
					3: "失败," + msg
				}
				return statusType[status] || status || "全部";
			},
			carScroll(e) {
				const {
					scrollTop
				} = e.detail;
			},
			scrolltolower() {
				this.skip += 1;
				let len = this.carList.length;
				let num = len / this.limit << 1;
				if (this.skip > num) {
					this.skip = num;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-container {
		.head {
			background: #fff;

			&-search {
				height: 100upx;
				border-bottom: 2upx solid rgb(248, 248, 248);
			}

			&-nav {
				display: flex;
				align-items: center;
				height: 104upx;
				border-bottom: 2upx solid rgba(31, 35, 41, 0.1);
			}
		}

		.main {}

		// 导航开始
		.head-nav {
			.nav-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&.active {
					.nav-title {
						color: #3865f3;
						border-bottom: 4rpx solid #3865f3;
						border-radius: 4rpx;
					}
				}

				.nav-title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					// font-weight: bold;
					color: #000;
					line-height: 40rpx;
				}

				.task-tabs--line-wrapper {
					position: absolute;
					bottom: 16rpx;
					left: 0;
					height: 4rpx;
					width: 100%;

					.task-tabs--line {
						height: 4rpx;
						transition: all 0.2s ease;

						.inside_line {
							width: 60rpx;
							margin: 0 auto;
							height: 4rpx;
							background: #3865f3;
							border-radius: 4rpx;
						}
					}
				}
			}
		}

		// 列表开始
		.list-concainer {
			.custom-swiper {
				height: calc(100vh - 308upx);

				&-scroll {
					height: 100%;
				}

				&-list {
					padding: 20upx 20upx 0upx 20upx;
					box-sizing: border-box;

					ul {
						background: #fff;
						border-radius: 20upx;
						// margin-bottom: 20upx;
						list-style: none;
						padding: 15upx;
						box-sizing: border-box;
					}
				}
			}



		}

		/deep/ .custom-circle {
			.uni-fab__circle {
				width: 80upx;
				height: 80upx;
			}
		}
	}
</style>